<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <title>实战演练</title>
</head>
<body>
   <!-- <nav class="navbar navbar-default navbar-fixed-top" id="topnav">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand logo" ><img src="images/logo.png" alt="慧煤网"></a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-right textnav" style="margin-top: 0">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-tag"></span> 咨询</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-align-right"></span> 新闻</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-edit"></span> 关于</a></li>
                </ul>
            </div>
        </div>
    </nav>-->

    <!-- 导航 -->
    <nav class="nav navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand">LOGO</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#duixiang">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="duixiang">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 煤炭交易</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> 实战演练</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-book"></span> 行业资讯</a></li>
                </ul>
            </div>

        </div>
    </nav>

   <!-- banner 焦点图banner-->
    <div class="carousel slide" id="mycarousel" style="margin-top: 50px">
        <ol class="carousel-indicators">
            <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
            <li data-target="#mycarousel" data-slide-to="1"></li>
            <li data-target="#mycarousel" data-slide-to="2"></li>
            <li data-target="#mycarousel" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active"><img src="images/1111.jpg" alt=""/></div>
            <div class="item"><img src="images/2222.jpg" alt=""/></div>
            <div class="item"><img src="images/3333.jpg" alt=""/></div>
            <div class="item"><img src="images/4444.jpg" alt=""/></div>
        </div>
       <!-- <a href="#mycarousel" data-slide="prev" class="carousel-control left" style="font-size: 100px; ">&lsaquo;</a>
        <a href="#mycarousel" data-slide="next" class="carousel-control right" style="font-size: 100px">&rsaquo;</a>-->
        <a href="#mycarousel" data-slide="prev" class="carousel-control left"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a href="#mycarousel" data-slide="next" class="carousel-control right"><span class="glyphicon glyphicon-chevron-right"></span></a>
        <a><span></span></a>
    </div>
    <!-- content内容one-->
   <div class="tab1">
       <div class="container">
           <h2 class="tab-h2">「 为什么选择瓢城企业培训 」</h2>
           <p class="tab-p">强大的师资力量，完美的实战型管理课程，让您的企业实现质的腾飞！</p>
           <div class="row">
               <div class="col-md-6 col">
                   <div class="media">
                       <div class="media-left">
                           <a href="#"><img alt="图片" src="images/tab1-1.png"></a>
                       </div>
                       <div class="media-body">
                           <h4 class="media-heading">课程内容</h4>
                           <p class="text-muted">其他：高校不知名的讲师编写，没有任何实战价值的教材！</p>
                           <p>其他：知名企业家、管理学大师联合编写的具有实现性教材！</p>
                       </div>
                   </div>
               </div>
               <div class="col-md-6 col">
                   <div class="media">
                       <div class="media-left">
                           <a href="#"><img alt="图片" src="images/tab1-2.png"></a>
                       </div>
                       <div class="media-body">
                           <h4 class="media-heading">师资力量</h4>
                           <p class="text-muted">其他：非欧美正牌大学毕业的、业界没有知名度的讲师！</p>
                           <p>其他：美国哈佛、耶鲁等世界一流高校、享有声誉的名牌专家！</p>
                       </div>
                   </div>
               </div>
               <div class="col-md-6 col">
                   <div class="media">
                       <div class="media-left">
                           <a href="#"><img alt="图片" src="images/tab1-3.png"></a>
                       </div>
                       <div class="media-body">
                           <h4 class="media-heading">课时安排</h4>
                           <p class="text-muted">其他：无法保证上课效率、没有时间表，当天任务无法完成！</p>
                           <p>其他：保证正常的上课效率、制定一张时间表、当天的任务当天完成！</p>
                       </div>
                   </div>
               </div>
               <div class="col-md-6 col">
                   <div class="media">
                       <div class="media-left">
                           <a href="#"><img alt="图片" src="images/tab1-4.png"></a>
                       </div>
                       <div class="media-body">
                           <h4 class="media-heading">服务团队</h4>
                           <p class="text-muted">其他：社会招聘的、服务水平参差不齐的普通员工！</p>
                           <p>其他：内部培养、经受过良好高端服务培训的高标准员工！</p>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>

   <!-- content 内容two  -->
   <div class="tab2">
       <div class="container">
           <div class="row">
               <div class="col-md-6 col-sm-6 tab2-img">
                   <img alt="photo" src="images/tab2.png" class="auto img-responsive center-block">
               </div>
               <div class="text col-md-6 col-sm-6 tab2-text">
                   <h3>强大的学习体系</h3>
                   <p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
               </div>
           </div>
       </div>
   </div>

   <div class="tab3">
       <div class="container">
           <div class="row">
               <div class="col-md-6 col-sm-6">
                   <img alt="photo" src="images/tab3.png" class="auto img-responsive center-block">
               </div>
               <div class="text col-md-6 col-sm-6">
                   <h3>完美的管理方式</h3>
                   <p>最新的管理培训方案，让您的企业赶超同行。</p>
               </div>
           </div>
       </div>
   </div>

   <!-- footer 首页/页脚 -->
   <div id="footer">
       <div class="container" style="footer">
           <p>企业培训 | 合作事宜 | 版权投诉</p>
           <p>苏ICP备12345678. © 2009-2016 瓢城企训网. Powered by Bootstrap.</p>
       </div>
   </div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $('#mycarousel').carousel({
        interval:2000,
        pause : 'hover'
    });
    /*$(function(){
        $('.carousel-control').css('line-height' , $('.carousel-inner img') . height() + 'px' );
        $(window) . resize(function () {
            var $height = $('.carousel-inner img') . eq(0) . height() ||
                          $('.carousel-inner img') . eq(1) . height() ||
                          $('.carousel-inner img') . eq(2) . height() ||
                          $('.carousel-inner img') . eq(3) . height() ;
            $('.carousel-control').css('line-height' , $height + 'px' );
        });
       /!* $(window).resize(function(){
            $('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
        });*!/
    });*/
    /*alert($('.auto').eq(0).height());
    alert($('.text').eq(0).height());*/
//    alert( ($('.auto').eq(0).height() - $('.text').eq(0).height() ) / 2 );
    $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height() ) / 2 + 'px');
    $(window).resize(function(){
        $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height() ) / 2 + 'px');
    });
    $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height() ) / 2 + 'px');
    $(window).resize(function(){
        $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height() ) / 2 + 'px');
    });
</script>
</body>
</html>